{{ define "content" }}
    {{ range $i, $step := .steps }}
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>
                    {{ if $step.FilePath }}
                        {{ i18n "Step %d change file %s" . nil nil (add1 $i) $step.FilePath }}
                    {{ else }}
                        {{ i18n "Step %d" . nil nil (add1 $i) }}
                    {{ end }}
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                        <li class="dropdown">
                            <a href="javascript:void(0);" data-placement="bottom" data-clipboard-action="copy" data-clipboard-target="#step-{{ $i }}" id="copy-button"><i class="glyphicon glyphicon-copy"></i></a>
                        </li>
                        {{ if $step.FilePath }}
                        <li class="dropdown">
                            <a href="?file={{ $step.FilePath }}&step={{ $i }}" data-toggle="tooltip" title="{{ i18n "Download" . }}"><i class="glyphicon glyphicon-download-alt"></i></a>
                        </li>
                        {{ end }}
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    {{ if $step.Description }}<p>{{ i18n $step.Description . }}</p>{{ end }}
                    <pre class="snippet" id="step-{{ $i }}"><code class="plaintext">{{ $step.Content }}</code></pre>
                </div>
            </div>
        </div>
    </div>
    {{ end }}
{{ end }}

{{ define "head" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/highlightjs/css/tomorrow.min.css" false) }}
    {{ staticHTML (staticURL "/boggart/assets/vendor/clipboard.js/css/clipboard.min.css" false) }}

    <style type="text/css">
        .snippet {
            padding: 0;
            position: relative;
            overflow: visible;
        }

        .plaintext {
            padding-top: 1em;
            padding-bottom: 1em;
        }
    </style>
{{ end }}

{{ define "js" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/highlightjs/js/highlight.pack.min.js" false) }}
    {{ staticHTML (staticURL "/boggart/assets/vendor/clipboard.js/js/clipboard.min.js" false) }}

    <script type="application/javascript">
        var cbSuccess = function(e) {
            e.clearSelection();
            $(e.trigger).tooltip({
                title: '{{ i18n "Config copied" . }}'
            }).tooltip('show');
        };

        var cbError = function(e) {
            e.clearSelection();
        };

        $(document).ready(function () {
            hljs.initHighlightingOnLoad();

            if(ClipboardJS.isSupported()) {
                $('.snippet').each(function(){
                    var e = $(this);

                    e.prepend('<button class="btn" data-placement="bottom" data-clipboard-action="copy" data-clipboard-target="#' + e.attr('id') + ' code">' +
                            '<img class="clippy" width="13" src="/boggart/assets/vendor/clipboard.js/images/clippy.svg" alt="{{ i18n "Copy to clipboard" . }}">' +
                    '</button>');
                });

                var cb = new ClipboardJS('.snippet [data-clipboard-action]', {
                    target: function(trigger) {
                        return trigger.nextElementSibling;
                    }
                });
                cb.on('success', cbSuccess);
                cb.on('error', cbError);

                var cbExt = new ClipboardJS('#copy-button');
                cbExt.on('success', cbSuccess);
                cbExt.on('error', cbError);
            }
        });
    </script>
{{ end }}